<template>
	<view class="box">
		<view class="empty">

		</view>
		<view class="main">
			<view class="mainitem" data-url="/pageUser/myuser/messageNotice" @click="allJump">
				<text>消息通知</text>
				<image :src="baseUrl +'/static/icon/bigright.png'" mode="aspectFill"></image>
			</view>
			<view class="mainitem" data-url="/pageUser/myuser/personaldata" @click="allJump">
				<text>个人资料</text>
				<image :src="baseUrl +'/static/icon/bigright.png'" mode="aspectFill"></image>
			</view>
			<view class="mainitem" data-url="/pageUser/myuser/amendphonenum" @click="allJump">
				<text>修改手机号</text>
				<image :src="baseUrl +'/static/icon/bigright.png'" mode="aspectFill"></image>
			</view>
			<view class="mainitem" v-if="info.mobile==''" data-url="/pageUser/myuser/bindphone" @click="allJump">
				<text>绑定手机号</text>
				<image :src="baseUrl +'/static/icon/bigright.png'" mode="aspectFill"></image>
			</view>
			<view class="mainitem" data-url="/pageUser/myuser/amendpassword" @click="allJump">
				<text>修改登录密码</text>
				<image :src="baseUrl + '/static/icon/bigright.png'" mode="aspectFill"></image>
			</view>
			<view class="mainitem" data-url="/pageUser/myuser/amendsafepassword" @click="allJump">
				<text>修改交易密码</text>
				<image :src="baseUrl +'/static/icon/bigright.png'" mode="aspectFill"></image>
			</view>
			<view class="mainitem" v-if="!info.is_real" data-url="/pageUser/myuser/realname" @click="allJump">
				<text>实名认证</text>
				<image :src="baseUrl +'/static/icon/bigright.png'" mode="aspectFill"></image>
			</view>
			<view class="mainitem" data-url="/pageUser/myuser/addresslist" @click="allJump">
				<text>收货地址</text>
				<image :src="baseUrl +'/static/icon/bigright.png'" mode="aspectFill"></image>
			</view>
			<view class="mainitem" data-url="/pageOrder/aboutorder/invoicelist" @click="allJump">
				<text>发票信息</text>
				<image :src="baseUrl +'/static/icon/bigright.png'" mode="aspectFill"></image>
			</view>
			<view class="mainitem" data-url="/pageUser/myuser/aboutfudiemall" @click="allJump">
				<text>关于福叠猫</text>
				<image :src="baseUrl +'/static/icon/bigright.png'" mode="aspectFill"></image>
			</view>
			<view class="mainitem" v-if="info.openid!=''" data-url="/pageUser/myuser/delbind" @click="allJump">
				<text>解绑小程序快捷登录</text>
				<image :src="baseUrl +'/static/icon/bigright.png'" mode="aspectFill"></image>
			</view>
			<view class="mainitem" v-if="info.pid<=1" @click="goinvitecode">
				<text>绑定邀请人</text>
				<image :src="baseUrl +'/static/icon/bigright.png'" mode="aspectFill"></image>
			</view>
			<view class="mainitem" data-url="/pageUser/myuser/secretFree" @click="allJump">
				<text>More券免密支付</text>
				<view class="mianmi flex_dq">
					<text class="f24 c9 " v-if="secreShow">已开通</text>
					<image :src="baseUrl + '/static/icon/bigright.png'" mode="aspectFill"></image>
				</view>
			</view>

			<view class="mainitem" @click="clickZx">
				<text>注销账号</text>
				<image :src="baseUrl + '/static/icon/bigright.png'" mode="aspectFill"></image>
			</view>

		</view>
		<view class="btn2" @click="outShow = true">
			退出登录
		</view>



		<u-popup :show="unbindShow" mode="center" @close="unbindShow = false" closeable bgColor="transparent">
			<view class="prompt flex_ZC">
				<text class="f36 fw7">提示</text>
				<text class="prompt_tit">解绑后，可以在其他微信使用快捷登录方式登录本账号，30天内最多可以申请解绑3次。</text>
				<view class="prompt_ntm flex_ld_a">
					<text @click="unbindShow = false">取消</text>
					<text @click="clickRelieve">立即解绑</text>
				</view>
			</view>
		</u-popup>

		<u-popup :show="outShow" mode="center" @close="outShow = false" closeable bgColor="transparent">
			<view class="prompt flex_ZC">
				<text class="f36 fw7">提示</text>
				<text class="prompt_tit">是否退出登录？</text>
				<view class="prompt_ntm flex_ld_a">
					<text @click="outShow = false">取消</text>
					<text @click="outLogin">退出登录</text>
				</view>
			</view>
		</u-popup>

		<u-popup :show="logoffShow" mode="center" @close="logoffShow = false" closeable bgColor="transparent">
			<view class="prompt flex_ZC">
				<text class="f36 fw7 tishi">提示</text>
				<view class="tishi flex_ZC">
					<text class="prompt_tit ">确定要注销改账号吗?</text>
					<text class="prompt_tit">账号注销完成后，该账号下的所有个人信息、交易记录、用户资产等将被永久删除且无法恢复。如有其他疑问请联系客服</text>
				</view>
				<view class="prompt_ntm flex_ld_a">
					<text @click="logoffShow = false">再想想</text>
					<text @click="cancelAccount" v-if="countDown">确定</text>
					
					<view class="djs flex_c" v-else @click="cancelTips">
						<text >确定</text>
						<u-count-down :time="times" format="ss" @change="onChange"> ({{ timeData.seconds }})</u-count-down>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		hex
	} from "js-md5"
	import {
		myuser,
		cleanupWx
	} from "../../api/user.js"
	import {logOff} from "../../api/other.js"
	export default {
		data() {
			return {
				baseUrl: this.$imageBaseUrl,
				info: {},
				timeData: {},
				unbindShow: false,
				outShow: false,
				secreShow: false,
				countDown: false, //倒计时
				logoffShow: false,
				times:6000,
			}
		},
		onLoad() {

		},
		onShow() {
			if (uni.getStorageSync("token")) {
				this.getinfo()
			}
		},
		methods: {
			getinfo() {
				myuser().then(res => {
					this.info = res.data
					this.secreShow = res.data.secret_free
				})
			},
			//统一跳转
			allJump(e) {
				// console.log(e.currentTarget.dataset);
				let {url} = e.currentTarget.dataset;
				uni.navigateTo({
					url: url,
				})
			},
			goinvitecode() {
				if (this.info.pid > 1) {
					uni.$u.toast("您已绑过邀请码")
				} else {
					uni.navigateTo({
						url: "/pageUser/myuser/invitecode"
					})
				}
			},
			clickZx(){
				this.countDown = false
				this.times = 6000
				this.logoffShow = true
			},
			// 倒计时
			onChange(e) {
				// console.log(e.seconds);
				this.timeData = e
				if (e.seconds == 0) {
					this.countDown = true
				}
			},
			cancelTips() {
				uni.$u.toast('请仔细阅读')
			},
			//注销账号
			cancelAccount() {
				logOff().then(res => {
					console.log(res);
					if(res.code == 1){
						uni.$u.toast('注销成功')
						uni.clearStorageSync();
						setTimeout(() => {
							uni.reLaunch({
								url: '/pageLogin/login/login'
							})
						}, 1500)
					}
				})
				
				
			},
			// 解绑微信
			clickRelieve() {
				cleanupWx().then(res => {
					console.log('解绑微信', res)
					if (res.code == 1) {
						uni.$u.toast(res.msg);
						uni.clearStorageSync();
						setTimeout(function() {
							uni.reLaunch({
								url: '/pageLogin/login/login'
							})
						}, 1500);
					}
				})
			},
			// 退出登录
			outLogin() {
				// 清除所有缓存
				// #ifdef H5
				var url = window.location.href;
				var baseUrl = url.split('?')[0];
				var queryString = url.split('?')[1];

				if (queryString) {
					var params = queryString.split('&');
					var filteredParams = params.filter(param => {
						return !param.startsWith('code=') && !param.startsWith('state=');
					});

					if (filteredParams.length > 0) {
						var newQueryString = filteredParams.join('&');
						var newUrl = baseUrl + '?' + newQueryString;
					} else {
						var newUrl = baseUrl;
					}
				} else {
					var newUrl = baseUrl;

				}
				console.log("newurl", newUrl)
				window.history.replaceState({}, document.title, newUrl + "?pageLogin/login/login");
				// #endif
				uni.$u.toast('退出成功');
				uni.clearStorageSync();
				setTimeout(function() {
					uni.reLaunch({
						url: '/pageLogin/login/login'
					})
				}, 1500);
			},
		},
	}
</script>

<style lang="scss">
	.box {
		width: 750rpx;
		height: 100vh;
		background: #F7F7F7;
	}

	.main {
		width: 750rpx;
		// height: 642rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		// margin-top: 40rpx;
	}

	.mainitem {
		width: 690rpx;
		height: 92rpx;
		margin: 0 auto;
		border-bottom: 2rpx solid #F7F7F7;
		display: flex;
		align-items: center;
		justify-content: space-between;

		>text {
			font-weight: 400;
			font-size: 30rpx;
			color: #3D3D3D;
		}

		>image {
			width: 14rpx;
			height: 28rpx;
		}
	}

	.mianmi>text {
		margin-right: 14rpx;
	}

	.mianmi>image {
		width: 14rpx;
		height: 28rpx;
	}

	.empty {
		width: 750rpx;
		height: 24rpx;
		background: #F7F7F7;
	}

	.btn {
		position: fixed;
		left: 50%;
		bottom: 240rpx;
		width: 690rpx;
		height: 90rpx;
		transform: translateX(-50%);
		background: #ffffff;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		text-align: center;
		line-height: 90rpx;
		font-weight: 400;
		font-size: 30rpx;
		color: #3D3D3D;
		border-radius: 8rpx;
	}

	.btn2 {
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 60rpx;
		width: 690rpx;
		height: 90rpx;
		background: #FFC300;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		text-align: center;
		line-height: 90rpx;
		font-weight: 400;
		font-size: 30rpx;
		color: #3D3D3D;
		border-radius: 8rpx;
	}

	.prompt {
		width: 690rpx;
		background: #ffffff;
		margin: 0 auto;
		border-radius: 20rpx;
		padding-top: 10rpx;
		padding-bottom: 40rpx;
	}

	.prompt>text {
		margin-top: 40rpx;
	}

	.prompt_tit {
		margin: 0 30rpx;
		font-size: 28rpx;
		color: #666666;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}

	.prompt_ntm {
		width: 100%;
		font-size: 30rpx;
		margin-top: 50rpx;
		text-align: center;
	}

	.prompt_ntm>text:nth-child(1) {
		width: 254rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: #F2F2F2;
		border-radius: 40rpx;
		color: #333333;
	}

	.prompt_ntm>text:nth-child(2) {
		width: 254rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: #FFCC28;
		border-radius: 40rpx;
		color: #333333;
	}

	.djs {
		width: 254rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: #F2F2F2;
		border-radius: 40rpx;
		color: #333333;
	}
</style>